Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
vee-validate
Advanced tools
vee-validate is a form validation library for Vue.js that allows you to validate inputs and forms with ease. It provides a set of validation rules and the ability to create custom rules, making it highly flexible and customizable.
Basic Validation
This example demonstrates basic validation using vee-validate. The input field for email is validated to ensure it is required and follows the email format. Errors are displayed using the `errors.first` method.
{
"template": "<form @submit.prevent=\"submitForm\"><input v-model=\"email\" name=\"email\" v-validate=\"'required|email'\" /><span>{{ errors.first('email') }}</span><button type=\"submit\">Submit</button></form>",
"data": "function() { return { email: '' }; }",
"methods": "{ submitForm() { this.$validator.validateAll().then((result) => { if (result) { alert('Form Submitted!'); } }); } }"
}
Custom Validation Rules
This example shows how to create and use custom validation rules in vee-validate. The custom rule 'unique' checks if the username is not 'admin' and displays an error message if it is.
{
"template": "<form @submit.prevent=\"submitForm\"><input v-model=\"username\" name=\"username\" v-validate=\"'required|unique'\" /><span>{{ errors.first('username') }}</span><button type=\"submit\">Submit</button></form>",
"data": "function() { return { username: '' }; }",
"methods": "{ submitForm() { this.$validator.validateAll().then((result) => { if (result) { alert('Form Submitted!'); } }); } }",
"created": "function() { this.$validator.extend('unique', { getMessage: field => `The ${field} is already taken.`, validate: value => new Promise(resolve => { setTimeout(() => { resolve({ valid: value !== 'admin' }); }, 500); }) }); }"
}
Validation with Async Rules
This example demonstrates how to use asynchronous validation rules in vee-validate. The custom rule 'is-available' checks if the email is not 'test@example.com' with a simulated delay.
{
"template": "<form @submit.prevent=\"submitForm\"><input v-model=\"email\" name=\"email\" v-validate=\"'required|email|is-available'\" /><span>{{ errors.first('email') }}</span><button type=\"submit\">Submit</button></form>",
"data": "function() { return { email: '' }; }",
"methods": "{ submitForm() { this.$validator.validateAll().then((result) => { if (result) { alert('Form Submitted!'); } }); } }",
"created": "function() { this.$validator.extend('is-available', { getMessage: field => `The ${field} is not available.`, validate: value => new Promise(resolve => { setTimeout(() => { resolve({ valid: value !== 'test@example.com' }); }, 1000); }) }); }"
}
Vuelidate is another popular validation library for Vue.js. It provides a simple and flexible way to validate forms and inputs. Unlike vee-validate, Vuelidate uses a model-based approach, which can be more intuitive for some developers.
Vue Formulate is a powerful form library for Vue.js that includes built-in validation. It offers a wide range of features, including form generation, validation, and custom input components. Compared to vee-validate, Vue Formulate provides a more comprehensive solution for form handling.
Buefy is a lightweight UI component library for Vue.js based on Bulma. It includes form validation features as part of its form components. While not as feature-rich as vee-validate, Buefy provides a good option for developers already using Bulma for styling.
vee-validate is a template-based validation framework for Vue.js that allows you to validate inputs and display errors.
Being template-based you only need to specify for each input what kind of validators should be used when the value changes. The errors will be automatically generated with 40+ locales supported. Many rules are available out of the box.
This plugin is inspired by PHP Framework Laravel's validation.
The latest release of vee-validate is v4, which is only available for Vue 3. If you are looking to install v3, then make sure to include the version tag.
yarn add vee-validate@3
npm i vee-validate@3 --save
vee-validate is also available on these CDNs:
When using a CDN via script tag, all the exported modules on VeeValidate are available on the VeeValidate Object. ex: VeeValidate.Validator
Install the rules you will use in your app, we will install the required
rule for now:
import { extend } from 'vee-validate';
import { required, email } from 'vee-validate/dist/rules';
// Add the required rule
extend('required', {
...required,
message: 'This field is required'
});
// Add the email rule
extend('email', {
...email,
message: 'This field must be a valid email'
});
Import the ValidationProvider
component and register it:
import { ValidationProvider } from 'vee-validate';
// Register it globally
// main.js or any entry file.
Vue.component('ValidationProvider', ValidationProvider);
import { ValidationProvider } from 'vee-validate';
export default {
components: {
ValidationProvider
}
};
All the JavaScript work is done. Next in the template add the inputs you want to validate them:
<ValidationProvider name="email" rules="required|email">
<div slot-scope="{ errors }">
<input v-model="email">
<p>{{ errors[0] }}</p>
</div>
</ValidationProvider>
The validation provider accepts two props: rules
which is in its simplest form, a string containing the validation rules separated by a |
character, and a name
prop which is the field name that will be used in error messages.
and That's it, your input will be validated automatically, notice that the ValidationProvider
uses scoped slots to pass down validation state and results.
There is more that can be done! You can customize events, validate initial values, manually validate or reset the field and much more. Make sure to read the docs.
Read the documentation and demos.
This library uses ES6 Promises so be sure to provide a polyfill for it for the browsers that do not support it.
You are welcome to contribute to this project, but before you do, please make sure you read the contribution guide.
Since Vue 3.0 was released, vee-validate@v4
targets Vue 3 support with a completely new API.
yarn add vee-validate
# or
npm install vee-validate
You can find the documentation for v4 here:
https://vee-validate.logaretm.com/v4/
MIT
FAQs
Painless forms for Vue.js
The npm package vee-validate receives a total of 486,772 weekly downloads. As such, vee-validate popularity was classified as popular.
We found that vee-validate demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.